<template>
  <view
    class="bi-order-card"
    :class="{ 'is-progress': data.orderStatus}"
    @click="handleClick">
    <view class="bi-order-card__body">
      <view class="bi-order-card__fields">

        <view class="bi-order-card__demand"  v-if="displayType === 'mileage'">
          <template v-if="data.orderStatus === 1">
            <view>
              开始里程已上传
            </view>
          </template>
          <template v-if="data.orderStatus ===2">
            <view>已完成</view>
          </template>
          <template v-if="data.orderStatus ===3">
            <view style="color: red">已删除</view>
          </template>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">车牌号：</text>
          <text class="bi-order-card__field-target">
            {{ data.vehiclePlate || ''}}
          </text>
        </view>

        <view class="bi-order-card__field"  v-if="displayType === 'mileage'">
          <text class="bi-order-card__field-label">工作内容：</text>
          <text class="bi-order-card__field-target">
            {{data.orderDetail ? (data.orderDetail.length>20? data.orderDetail.substring(0,20):data.orderDetail) :''}}
          </text>
        </view>

        <view class="bi-order-card__field"  v-if="displayType === 'mileage'">
          <text class="bi-order-card__field-label">开始里程：</text>
          <text class="bi-order-card__field-target">
            {{data.startMiles || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'mileage' && data.orderStatus === 2">
          <text class="bi-order-card__field-label">结束里程：</text>
          <text class="bi-order-card__field-target">
            {{data.endMiles || ''}}
          </text>
        </view>

        <view class="bi-order-card__field" v-if="displayType === 'mileage' && data.orderStatus === 1">
          <text class="bi-order-card__field-label">提交时间：</text>
          <text class="bi-order-card__field-target">
            {{ sub5Hours(data.createTime) || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'mileage' && data.orderStatus === 2">
          <text class="bi-order-card__field-label">完成时间：</text>
          <text class="bi-order-card__field-target">
            {{ sub5Hours(data.completeTime) || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'mileage' && data.orderStatus === 2">
          <text class="bi-order-card__field-label">使用时长：</text>
          <text class="bi-order-card__field-target">
            {{  calculateDuration(data.startUploadTime,data.completeTime) || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'mileage' && data.orderStatus === 2">
          <text class="bi-order-card__field-label">使用里程：</text>
          <text class="bi-order-card__field-target">
            {{ calculateDistance(data.startMiles , data.endMiles) || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'mileage'">
          <text class="bi-order-card__field-label">提交人：</text>
          <text class="bi-order-card__field-target">
            {{ data.createName || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'mileage' && data.orderStatus === 3">
          <text class="bi-order-card__field-label">删除时间：</text>
          <text class="bi-order-card__field-target">
            {{ sub5Hours(data.deleteTime) || ''}}
          </text>
        </view>

        <view class="bi-order-card__field" v-if="displayType === 'default'">
          <text class="bi-order-card__field-label">车号：</text>
          <text class="bi-order-card__field-target">
            {{ data.carNum || ''}}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'default'">
          <text class="bi-order-card__field-label">车队名称：</text>
          <text class="bi-order-card__field-target">
            {{ data.vehicleTeam|| '' }}
          </text>
        </view>
        <view class="bi-order-card__field" v-if="displayType === 'default'">
          <text class="bi-order-card__field-label">车辆昵称：</text>
          <text class="bi-order-card__field-target">
            {{ data.nickName|| '' }}
          </text>
        </view>

        <view v-if="vehicleLicenceExpiringFlag || vehicleInsurenceExpiringFlag && displayType === 'default'"
              style="border: 1rpx #f47554 solid;border-radius: 10rpx;padding: 5rpx 10rpx;  box-shadow: 4px 4px 6px #f47554;">
          <view class="bi-order-card__field" v-if="vehicleLicenceExpiringFlag">
            <text class="bi-order-card__field-expire">
              您的车辆检验将要在{{ sub5Hours(data.vehicleLicenseExpireTime) || ''}} 过期，请及时验车！
            </text>
          </view>
          <view class="bi-order-card__field" v-if="vehicleInsurenceExpiringFlag">
            <text class="bi-order-card__field-expire">
              您的车辆商业险将要在{{sub5Hours(data.commercialInsuranceExpireTime)  || ''}}过期，请及时续费！
            </text>
          </view>
        </view>
      </view>
      <view class="bi-order-card__toolbar" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { sub5Hours,isLessThanOrEqualToEndOfNextMonth} from '@/apis/order.js';

export default {
  name: 'BiCarCard',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    currentTimeType: {
      type: Number,
      default:null
    },
    displayType: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    vehicleLicenceExpiringFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.vehicleLicenseExpireTime)
    },
    vehicleInsurenceExpiringFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.commercialInsuranceExpireTime)
    },
  },
  methods: {
    calculateDuration(startTime, endTime) {
      // 检查时间参数是否存在
      if (!startTime || !endTime) {
        return '';
      }

      // 处理时间参数，支持时间字符串和时间戳
      const start = new Date(startTime).getTime();
      const end = new Date(endTime).getTime();

      // 验证时间是否有效
      if (isNaN(start) || isNaN(end)) {
        return '';
      }

      // 计算时间差（毫秒）
      const diff = end - start;

      // 如果时间差为负数，返回空字符串
      if (diff < 0) {
        return '';
      }

      // 转换为小时和分钟
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

      // 返回格式化字符串
      return `${hours}小时 ${minutes}分钟`;
    },
    calculateDistance(startMiles, endMiles) {
      // 检查时间参数是否存在
      if (!startMiles || !endMiles) {
        return '';
      }

      // 计算时间差（毫秒）
      const diff = endMiles - startMiles;
      // 返回格式化字符串
      return `${diff}公里`;
    },
    sub5Hours(currentTime){
      return sub5Hours(currentTime)
    },
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="less">
.bi-order-card {
  margin: 16px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.7em;
  text.is-light {
    color: #f47554;
  }
  &.is-progress {
    .bi-order-card__demand {
      color: #f47554;
      font-size: 25rpx;
    }
  }
  box-shadow: 5rpx 5rpx 8rpx #bfbfbf;

}
.bi-order-card__demand,
.bi-order-card__company {
  font-size: 16px;
  font-weight: bold;
  float: right;

}
.bi-order-card__linkman {
  font-size: 12px;
  color: #666;
}
.bi-order-card__head {
  border-bottom: 1px solid #e3e5e5;
  padding-bottom: 41rpx;
  margin-bottom: 41rpx;
}
.bi-order-card__field {
  display: flex;
  justify-content: space-between; /* 在子元素之间分配空间 */
  width: 100%; /* 确保容器宽度 */
  border-bottom: 1rpx solid #e3e5e5;
}
.bi-order-card__field-label {
  font-weight: bold;
  text-align: left; /* 可选，通常不需要，因为 flexbox 已处理 */
  width: 90%;
}
.bi-order-card__toolbar {
  padding: 4px 0;
}
.bi-order-card__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.bi-order-card__addon {
  padding-bottom: 3px;
}
.bi-order-card__notfilled {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 4px;
}
.bi-order-card__notfilled-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -1px;
}
.bi-order-card__notfilled-text {
  color: #f00;
}
.bi-order-card__field-target{
  word-wrap: break-word;
  width: 100%;
  text-align: right;
  word-break: break-all;

}
.bi-order-card__field-expire{
  word-wrap: break-word;
  width: 100%;
  color: #f47554;
  font-size: 24rpx;
}
.bi-order-card__demand {
  color: #f47554;
}
</style>
